React Concurrent Rendering: Khai phá Hiệu suất với Kiến trúc Fiber và Phân tích Vòng lặp Công việc

React, một thế lực thống trị trong phát triển front-end, đã liên tục phát triển để đáp ứng nhu cầu của các giao diện người dùng ngày càng phức tạp và tương tác. Một trong những tiến bộ quan trọng nhất trong sự phát triển này là Concurrent Rendering, được giới thiệu với React 16. Sự thay đổi mô hình này đã thay đổi cơ bản cách React quản lý các bản cập nhật và render component, khai phá những cải thiện đáng kể về hiệu suất và cho phép trải nghiệm người dùng phản hồi nhanh hơn. Bài viết này đi sâu vào các khái niệm cốt lõi của Concurrent Rendering, khám phá kiến trúc Fiber và vòng lặp công việc, đồng thời cung cấp những hiểu biết sâu sắc về cách các cơ chế này đóng góp vào các ứng dụng React mượt mà và hiệu quả hơn.

Hiểu về Nhu cầu của Concurrent Rendering

Trước Concurrent Rendering, React hoạt động một cách đồng bộ. Khi một bản cập nhật xảy ra (ví dụ: thay đổi trạng thái, cập nhật prop), React sẽ bắt đầu render toàn bộ cây component trong một hoạt động duy nhất, không bị gián đoạn. Việc render đồng bộ này có thể dẫn đến các điểm nghẽn hiệu suất, đặc biệt khi xử lý các cây component lớn hoặc các phép tính phức tạp. Trong các giai đoạn render này, trình duyệt sẽ trở nên không phản hồi, dẫn đến trải nghiệm người dùng giật cục và khó chịu. Điều này thường được gọi là "chặn luồng chính" (blocking the main thread).

Hãy tưởng tượng một tình huống mà người dùng đang gõ vào một trường văn bản. Nếu component chịu trách nhiệm hiển thị văn bản được gõ là một phần của cây component lớn, phức tạp, mỗi lần gõ phím có thể kích hoạt một lần render lại chặn luồng chính. Điều này sẽ dẫn đến độ trễ đáng chú ý và trải nghiệm người dùng kém.

Concurrent Rendering giải quyết vấn đề này bằng cách cho phép React chia nhỏ các tác vụ render thành các đơn vị công việc nhỏ hơn, có thể quản lý được. Các đơn vị này có thể được ưu tiên, tạm dừng và tiếp tục khi cần thiết, cho phép React xen kẽ các tác vụ render với các hoạt động khác của trình duyệt, chẳng hạn như xử lý đầu vào của người dùng hoặc yêu cầu mạng. Cách tiếp cận này ngăn luồng chính bị chặn trong thời gian dài, mang lại trải nghiệm người dùng phản hồi nhanh hơn và mượt mà hơn. Hãy coi nó như đa nhiệm cho quy trình render của React.

Giới thiệu Kiến trúc Fiber

Tại cốt lõi của Concurrent Rendering nằm kiến trúc Fiber. Fiber đại diện cho một quá trình triển khai lại hoàn toàn thuật toán đối chiếu nội bộ của React. Không giống như quy trình đối chiếu đồng bộ trước đó, Fiber giới thiệu một cách tiếp cận tinh vi và chi tiết hơn để quản lý các bản cập nhật và render component.

Fiber là gì?

Một Fiber có thể được hiểu theo khái niệm là một biểu diễn ảo của một instance component. Mỗi component trong ứng dụng React của bạn được liên kết với một nút Fiber tương ứng. Các nút Fiber này tạo thành một cấu trúc cây phản ánh cây component. Mỗi nút Fiber chứa thông tin về component, props của nó, các children của nó và trạng thái hiện tại của nó. Quan trọng nhất, nó cũng chứa thông tin về công việc cần thực hiện cho component đó.

Các thuộc tính chính của một nút Fiber bao gồm:

• type: Loại component (ví dụ: div, MyComponent).
• key: Khóa duy nhất được gán cho component (được sử dụng để đối chiếu hiệu quả).
• props: Các props được truyền cho component.
• child: Một con trỏ đến nút Fiber đại diện cho children đầu tiên của component.
• sibling: Một con trỏ đến nút Fiber đại diện cho sibling tiếp theo của component.
• return: Một con trỏ đến nút Fiber đại diện cho component cha của component.
• stateNode: Một tham chiếu đến instance component thực tế (ví dụ: một nút DOM cho các component host, một instance component class).
• alternate: Một con trỏ đến nút Fiber đại diện cho phiên bản trước của component.
• effectTag: Một cờ cho biết loại bản cập nhật cần thiết cho component (ví dụ: đặt, cập nhật, xóa).

Cây Fiber

Cây Fiber là một cấu trúc dữ liệu bền vững biểu thị trạng thái hiện tại của UI ứng dụng. Khi một bản cập nhật xảy ra, React sẽ tạo một cây Fiber mới ở chế độ nền, biểu thị trạng thái mong muốn của UI sau bản cập nhật. Cây mới này được gọi là cây "work-in-progress" (đang thực hiện). Sau khi cây work-in-progress hoàn tất, React sẽ hoán đổi nó với cây hiện tại, làm cho các thay đổi hiển thị với người dùng.

Cách tiếp cận cây kép này cho phép React thực hiện các bản cập nhật render theo cách không chặn. Cây hiện tại vẫn hiển thị với người dùng trong khi cây work-in-progress đang được xây dựng ở chế độ nền. Điều này ngăn UI bị đóng băng hoặc trở nên không phản hồi trong quá trình cập nhật.

Lợi ích của Kiến trúc Fiber

• Render có thể bị gián đoạn: Fiber cho phép React tạm dừng và tiếp tục các tác vụ render, cho phép nó ưu tiên các tương tác của người dùng và ngăn luồng chính bị chặn.
• Render tăng dần: Fiber cho phép React chia nhỏ các bản cập nhật render thành các đơn vị công việc nhỏ hơn, có thể được xử lý dần dần theo thời gian.
• Ưu tiên hóa: Fiber cho phép React ưu tiên các loại bản cập nhật khác nhau, đảm bảo rằng các bản cập nhật quan trọng (ví dụ: đầu vào của người dùng) được xử lý trước các bản cập nhật ít quan trọng hơn (ví dụ: lấy dữ liệu nền).
• Cải thiện xử lý lỗi: Fiber giúp xử lý lỗi dễ dàng hơn trong quá trình render, vì nó cho phép React quay lại trạng thái ổn định trước đó nếu xảy ra lỗi.

Vòng lặp Công việc: Fiber giúp Concurrency như thế nào

Vòng lặp công việc là động cơ thúc đẩy Concurrent Rendering. Nó là một hàm đệ quy duyệt qua cây Fiber, thực hiện công việc trên mỗi nút Fiber và cập nhật UI một cách tăng dần. Vòng lặp công việc chịu trách nhiệm cho các tác vụ sau:

• Chọn Fiber tiếp theo để xử lý.
• Thực hiện công việc trên Fiber (ví dụ: tính toán trạng thái mới, so sánh props, render component).
• Cập nhật cây Fiber với kết quả công việc.
• Lập lịch thêm công việc cần thực hiện.

Các Giai đoạn của Vòng lặp Công việc

Vòng lặp công việc bao gồm hai giai đoạn chính:

1. Giai đoạn Render (còn gọi là Giai đoạn Đối chiếu): Giai đoạn này chịu trách nhiệm xây dựng cây Fiber work-in-progress. Trong giai đoạn này, React duyệt qua cây Fiber, so sánh cây hiện tại với trạng thái mong muốn và xác định những thay đổi cần được thực hiện. Giai đoạn này là không đồng bộ và có thể bị gián đoạn. Nó xác định những gì *cần* được thay đổi trong DOM.
2. Giai đoạn Commit: Giai đoạn này chịu trách nhiệm áp dụng các thay đổi cho DOM thực tế. Trong giai đoạn này, React cập nhật các nút DOM, thêm các nút mới và xóa các nút cũ. Giai đoạn này là đồng bộ và không thể bị gián đoạn. Nó *thực sự* thay đổi DOM.

Vòng lặp Công việc giúp Concurrency như thế nào

Chìa khóa của Concurrent Rendering nằm ở thực tế là Giai đoạn Render là không đồng bộ và có thể bị gián đoạn. Điều này có nghĩa là React có thể tạm dừng Giai đoạn Render bất kỳ lúc nào để cho phép trình duyệt xử lý các tác vụ khác, chẳng hạn như đầu vào của người dùng hoặc yêu cầu mạng. Khi trình duyệt rảnh rỗi, React có thể tiếp tục Giai đoạn Render từ nơi nó đã dừng lại.

Khả năng tạm dừng và tiếp tục Giai đoạn Render này cho phép React xen kẽ các tác vụ render với các hoạt động trình duyệt khác, ngăn luồng chính bị chặn và đảm bảo trải nghiệm người dùng phản hồi nhanh hơn. Mặt khác, Giai đoạn Commit phải đồng bộ để đảm bảo tính nhất quán trong UI. Tuy nhiên, Giai đoạn Commit thường nhanh hơn nhiều so với Giai đoạn Render, vì vậy nó thường không gây ra các điểm nghẽn hiệu suất.

Ưu tiên hóa trong Vòng lặp Công việc

React sử dụng thuật toán lập lịch dựa trên mức độ ưu tiên để xác định những nút Fiber nào cần xử lý trước. Thuật toán này gán một mức độ ưu tiên cho mỗi bản cập nhật dựa trên tầm quan trọng của nó. Ví dụ, các bản cập nhật được kích hoạt bởi đầu vào của người dùng thường được gán mức độ ưu tiên cao hơn các bản cập nhật được kích hoạt bởi việc lấy dữ liệu nền.

Vòng lặp công việc luôn xử lý các nút Fiber có mức độ ưu tiên cao nhất trước. Điều này đảm bảo rằng các bản cập nhật quan trọng được xử lý nhanh chóng, cung cấp trải nghiệm người dùng phản hồi nhanh. Các bản cập nhật ít quan trọng hơn được xử lý ở chế độ nền khi trình duyệt rảnh rỗi.

Hệ thống ưu tiên này rất quan trọng để duy trì trải nghiệm người dùng mượt mà, đặc biệt trong các ứng dụng phức tạp với nhiều bản cập nhật đồng thời. Hãy xem xét một tình huống mà người dùng đang gõ vào thanh tìm kiếm trong khi đồng thời, ứng dụng đang lấy và hiển thị danh sách các cụm từ tìm kiếm gợi ý. Các bản cập nhật liên quan đến việc gõ của người dùng nên được ưu tiên để đảm bảo trường văn bản vẫn phản hồi, trong khi các bản cập nhật liên quan đến các cụm từ tìm kiếm gợi ý có thể được xử lý ở chế độ nền.

Các Ví dụ Thực tế về Concurrent Rendering

Hãy xem xét một vài ví dụ thực tế về cách Concurrent Rendering có thể cải thiện hiệu suất và trải nghiệm người dùng của các ứng dụng React.

1. Debouncing Đầu vào Người dùng

Hãy xem xét một thanh tìm kiếm hiển thị kết quả tìm kiếm khi người dùng gõ. Nếu không có Concurrent Rendering, mỗi lần gõ phím có thể kích hoạt một lần render lại toàn bộ danh sách kết quả tìm kiếm, dẫn đến các vấn đề về hiệu suất và trải nghiệm người dùng giật cục.

Với Concurrent Rendering, chúng ta có thể sử dụng debouncing để trì hoãn việc render kết quả tìm kiếm cho đến khi người dùng ngừng gõ trong một khoảng thời gian ngắn. Điều này cho phép React ưu tiên đầu vào của người dùng và ngăn UI trở nên không phản hồi.

Đây là một ví dụ đơn giản hóa:

import React, { useState, useCallback } from 'react';

function SearchBar() {
 const [searchTerm, setSearchTerm] = useState('');

 const debouncedSearch = useCallback(
 debounce((value) => {
 // Thực hiện logic tìm kiếm ở đây
 console.log('Searching for:', value);
 }, 300),
 []
 );

 const handleChange = (event) => {
 const value = event.target.value;
 setSearchTerm(value);
 debouncedSearch(value);
 };

 return (
 
 );
}

// Hàm debounce
function debounce(func, delay) {
 let timeout;
 return function(...args) {
 const context = this;
 clearTimeout(timeout);
 timeout = setTimeout(() => func.apply(context, args), delay);
 };
}

export default SearchBar;

Trong ví dụ này, hàm debounce trì hoãn việc thực thi logic tìm kiếm cho đến khi người dùng ngừng gõ trong 300 mili giây. Điều này đảm bảo rằng kết quả tìm kiếm chỉ được render khi cần thiết, cải thiện hiệu suất của ứng dụng.

2. Lazy Loading Hình ảnh

Tải các hình ảnh lớn có thể ảnh hưởng đáng kể đến thời gian tải ban đầu của một trang web. Với Concurrent Rendering, chúng ta có thể sử dụng lazy loading để trì hoãn việc tải hình ảnh cho đến khi chúng hiển thị trong viewport.

Kỹ thuật này có thể cải thiện đáng kể hiệu suất cảm nhận của ứng dụng, vì người dùng không phải đợi tất cả hình ảnh tải xong trước khi họ có thể bắt đầu tương tác với trang.

Đây là một ví dụ đơn giản hóa sử dụng thư viện react-lazyload:

import React from 'react';
import LazyLoad from 'react-lazyload';

function ImageComponent({ src, alt }) {
 return (
 Loading...
}>
 
 
 );
}

export default ImageComponent;

Trong ví dụ này, component LazyLoad trì hoãn việc tải hình ảnh cho đến khi nó hiển thị trong viewport. Thuộc tính placeholder cho phép chúng ta hiển thị một chỉ báo tải trong khi hình ảnh đang được tải.

3. Suspense cho Việc Lấy Dữ liệu

React Suspense cho phép bạn "tạm dừng" việc render một component trong khi chờ dữ liệu tải. Điều này đặc biệt hữu ích cho các tình huống lấy dữ liệu, khi bạn muốn hiển thị một chỉ báo tải trong khi chờ dữ liệu từ API.

Suspense tích hợp liền mạch với Concurrent Rendering, cho phép React ưu tiên việc tải dữ liệu và ngăn UI trở nên không phản hồi.

Đây là một ví dụ đơn giản hóa:

import React, { Suspense } from 'react';

// Một hàm lấy dữ liệu giả trả về một Promise
const fetchData = () => {
 return new Promise(resolve => {
 setTimeout(() => {
 resolve({ data: 'Data loaded!' });
 }, 2000);
 });
};

// Một component React sử dụng Suspense
function MyComponent() {
 const resource = fetchData();
 return (
 Loading...